<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="draw.js"></script>
</head>
<body onkeypress="console.log(event.keyCode,event.ctrlKey)">
    <canvas id="canvas" width="1920" height="800" style="background-color:black" >
    </canvas>

    <div id="mouse_info"></div>
    <div id="draw_info"></div>
    <script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var mouse_info = document.getElementById('mouse_info');
    var draw_info = document.getElementById('draw_info');
    var default_zoom = 10;
    ctx = canvas.getContext("2d");
    draw_grid(ctx,[canvas.width ,canvas.height ],window.zoom||default_zoom);
    var old_buttons = 0;
    function mdown(buttons,button){
        if(((old_buttons & button)==0) && ((buttons & button)!=0)){
            return true;
        }
        return false;
    }

    function mup(buttons,button){
        if(((old_buttons & button)!=1) && ((buttons & button)==0)){
            return true;
        }
        return false;
    }

    function getzoom(){
        return window.zoom||default_zoom;
    }

    do_draw_array = [];


    draw_line = function(x1,y1,x2,y2){
        ctx.save();
        ctx.beginPath();
        ctx.lineWidth   = getzoom();//(window.zoom||default_zoom);
        ctx.strokeStyle = 'gray';
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2,y2);
        ctx.stroke();
        ctx.restore();
    }

    draw_pin = function(x,y){
        draw_pin_set(ctx,x,y);
    }

    function draw_list(){
        for (let i = 0; i < do_draw_array.length; i++) {
            const element = do_draw_array[i];
            eval(element);
        }
    }

    function process_draw(){
        ctx.strokeStyle = 'black';
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.stroke();

        draw_grid(ctx,[canvas.width ,canvas.height ],getzoom());        //绘制网格

        // ctx.save();
        // ctx.beginPath();
        // ctx.lineWidth   = getzoom();//(window.zoom||default_zoom);
        // ctx.strokeStyle = 'gray';
        // ctx.moveTo(downX,downY);
        // ctx.lineTo(x*getzoom(),y*getzoom());
        // ctx.stroke();
        // ctx.restore();
        draw_list();
    }

    downX = -1;
    downY = -1;

    draw_mode = "绘制直线"

    //鼠标移动事件
    canvas.onmousedown = (
        ev
    )=>{
        if(ev.buttons & 0x1){
            downX = Math.floor(ev.x / getzoom()) * getzoom();
            downY = Math.floor(ev.y / getzoom()) * getzoom();
        }
    }

    canvas.onmouseup = (ev)=>{
        var x = Math.floor(ev.x / (getzoom())) * getzoom();
        var y = Math.floor(ev.y / (getzoom())) * getzoom();

        if(draw_mode=="绘制直线")
            do_draw_array.push(`draw_line(${downX},${downY},${x},${y});`);
        else if(draw_mode.indexOf("设置引脚点")>=0){
            do_draw_array.push(`draw_pin_set(ctx,${downX},${downY},${getzoom()});`);
        }

        downX = -1;
        downY = -1;
    }

    function update_info(x,y){
        mouse_info.innerText = `X:${x},Y:${y}`;
        draw_info.innerText = draw_mode;
    }

    window.onkeydown = (ev)=>{
        console.log(ev.keyCode);
        if(ev.ctrlKey && (ev.keyCode==90)){
            do_draw_array.pop();
            process_draw();
        }
        else{
            //快捷键
            if(ev.keyCode==65){
                draw_mode = "绘制直线"
            }
            else if(ev.keyCode>48 && ev.keyCode<=48+9){
                draw_mode = `设置引脚点${ev.keyCode-48}`
            }
            update_info(ev.x,ev.y);
        }
        //ctrlKey = ev.ctrlKey;
    }

    canvas.onmousemove = (
        ev
        //:MouseEvent
    )=>{

        var x = Math.floor(ev.x / (getzoom()));
        var y = Math.floor(ev.y / (getzoom()));
        update_info(x,y);

        process_draw();
        if(draw_mode=="绘制直线"){
            if(ev.buttons & 1){
                draw_line(downX,downY,x*getzoom(),y*getzoom());
            }
            else{
                //
            }
        }
        else if(draw_mode.indexOf('设置引脚点')>=0){
            draw_pin_set(ctx,x*getzoom(),y*getzoom(),getzoom());
        }

        draw_auxiliary_line(ctx,x*getzoom(),y*getzoom()-getzoom()/2);
    }

    </script>
</body>
</html>